<template>
    <div class="mr-root">
        <div class="content">
            <div class="flex">
                <router-link to="/" class="active">
                    <div @click="one" class="one">
                        <i class="fa fa-home"></i>
                        <p>漫画</p>
                    </div>
                </router-link>
                <router-link to="find">
                    <div @click="one">
                        <i class="fa fa-search"></i>
                        <p>发现</p>
                    </div>
                </router-link>
                <router-link to="communlity">
                    <div @click="one">
                        <i class="fa fa-search"></i>
                        <p>V社区</p>
                    </div>
                </router-link>
                <router-link to="user">
                    <div @click="one">
                        <i class="fa fa-user-o"></i>
                        <p>我的</p>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
      export default{
        methods:{
        one(){
          $('a').click(function(){
              console.log($(this).index())
              $(this).addClass('active').siblings().removeClass('active')
          })
       }
    }
      }
 </script>


<style scoped>
    .mr-root {
        width: 100%;
        height: 100%;
    }
    
    .content {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        background: white;
        color: white;
        z-index: 100;
    }
    
    .flex {
        width: 100%;
        display: flex;
    }
    
    a {
        width: 24%;
        text-align: center;
        font-size: 0.4rem;
    }
    
    .active {
        color: salmon;
    }
</style>